<template>
  <div>
    <router-link :to="{path:'/paths/detail', query:{id:path.id}}">
      <div class="path-item">
        <div class="col-xs-5 col-md-4  path-img">
          <img :src="path.img">
        </div>
        <div class="col-xs-7 col-md-8">
          <div class="path-name">{{path.title}}</div>
          <div class="path-course-num"><span>{{path.courseTotal}}</span> 门课程</div>
        </div>
        <div class="desc-layer">
          <div class="center">{{path.desc}}</div>
        </div>
      </div>
    </router-link>
  </div>
</template>
<script>
export default {
  props: ['path']
}
</script>
<style scoped>
.path-item {
  text-align: left;
}
/* .path-item {
  height: 100px;
  margin-bottom: 10px;
  box-shadow: 0 0 3px #ccc;
  position: relative;
}
.path-item .path-img img {
  width: 100px;
  height: 100px;
} */
</style>
